<template>
  <view class="nav-bar">
    <u-navbar
      :title="title"
      :leftText="leftText"
      :leftIconName="leftIcon"
      :leftIconColor="leftIconColor"
      :titleStyle="titleStyle"
      :fixed="fixed"
      :safeAreaInsetTop="safeAreaInsetTop"
      :bgColor="bgColor"
      @leftClick="onClickLeft"
      :placeholder="placeholder"
    >
      <slot slot="right"></slot>
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: "NavBar",
  props: {
    title: {
      type: String,
      default: ""
    },
    leftText: {
      type: String,
      default: ""
    },
    leftIcon: {
      type: String,
      default: "arrow-left"
    },
    leftIconColor: {
      type: String,
      default: "#FFFFFF"
    },
    fixed: {
      type: Boolean,
      default: true
    },
    safeAreaInsetTop: {
      type: Boolean,
      default: true
    },
    bgColor: {
      type: String,
      default: "#38ADFF"
    },
    placeholder: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    titleStyle() {
      return {
        color: "#FFFFFF",
        fontSize: "36rpx"
      };
    }
  },
  methods: {
    onClickLeft() {
      this.$emit("leftClick");
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  .u-navbar__content {
    // height: 88rpx;
  }
//   /deep/.u-icon {
//     display: none;
//   }
}
</style> 